<template>
    <div>
        <h2>当前求和为：{{ total }}</h2>
        <button type="button" @click="total++">点我加1</button>
    </div>
    <br />
    <div>
        <p>当前的信息:{{ msg }}</p>
        <button type="button" @click="msg+='!'">修改msg</button>
    </div>
    <br />
    <div>
        <p>姓名:{{person.name}}</p>
        <p>年龄:{{person.age}}</p>
        <button type="button" @click="person.name+='```'">修改姓名</button>
        <button type="button" @click="person.age++">修改年龄</button>
    </div>
    <br />
    <div>
        <p>姓名:{{otherperson.name}}</p>
        <p>年龄:{{otherperson.age}}</p>
        <button type="button" @click="otherperson.name+='```'">修改姓名</button>
        <button type="button" @click="otherperson.age++">修改年龄</button>
      </div>
    </template>
    
    <script setup>
    let total = ref(100);
    let msg = ref('watch教程');
    let person = reactive({ name:'张三', age: 18 });
    let otherperson=ref({name:'john', age:100})
    //watch监视单个数据
    
    /*  watch(total,(newValue,oldValue)=>{
      console.log('%c [newValue]: ', 'color: #bf2c9f; background: pink; font-size: 13px;', newValue);
      console.log('[ oldValue ] >', oldValue)
     },{
      immediate: true
     }) */
    //watch 监听多个数据
    
    /* watch([total, msg], [(newValue, oldValue) => {
        console.log('%c [newValue]: ', 'color: #bf2c9f; background: pink; font-size: 13px;', newValue);
        console.log('[ oldValue ] >', oldValue)
    }], {
        immediate: true
         
        //immediate：在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。
        //deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。参考深层侦听器。
        //lush：调整回调函数的刷新时机。参考回调的刷新时机及 watchEffect()。
        //onTrack / onTrigger：调试侦听器的依赖。参考调试侦听器。
       //once: 回调函数只会运行一次。侦听器将在回调函数首次运行后自动停止。 
    
    }) 
    */
    //watch监听复杂类型数据
    /* 
         watch无法监听reactive定义的响应式数据，但是可以监听ref定义的响应式数据。
         无法监听oldValue，只能监听newValue。
         vue3中默认开启了深度监听，且无法关闭，强制开启，深度监听开销很大，如果不需要深度监听，可以使用浅监听。
    */
    // watch(person,(newValue,oldValue)=>{
    //   console.log(`output->person`,person)//这里监听到的是person的引用地址
    //   console.log('[ oldValue ] >', oldValue)
    //   console.log('%c [newValue]: ', 'color: #bf2c9f; background: pink; font-size: 13px;', newValue);
    // })
    //监听响应式数据中的单个属性
    // watch(()=>person.name,(newValue,oldValue)=>{
    //   console.log(`output->person.name`,person.name)
    //   console.log('[ oldValue ] >', oldValue)
    //   console.log('%c [newValue]: ', 'color: #bf2c9f; background: pink; font-size: 13px;', newValue);
    // })
    //监听响应式数据中的多个属性
    // watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
    //   console.log(`output->person.name`,person.name)
    //   console.log('[ oldValue ] >', oldValue)
    //   console.log('%c [newValue]: ', 'color: #bf2c9f; background: pink; font-size: 13px;', newValue);
    // })
    watch(otherperson,(newValue,oldValue)=>(
      console.log('[ newValue,oldValue ] >',newValue,oldValue )
      //此处无法监听旧值
    ),{deep: true});
    </script>
    
    <style lang="less" scoped>
    body {
        width: 100px;
        height: 100px;
        background: #fff;
    }
    </style>
    